.modal {
    @include position(absolute, 0 null null 0);
    @include size(100%);
    background-color: var(--modal-background-color);
    z-index: $z-index-modal;

    transition: background-color $base-duration $base-timing;
    &.modal--hidden {
        background-color: var(--modal-background-color-tr);
    }

    &.modal--opaque {
        background-color: var(--background-color);
    }

    &__content {
        @include size(100%);
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: center;

        transition: all $base-duration $base-timing;
        .modal--hidden & {
            transform: scale(0.01);
            opacity: 0;
        }
    }

    &__icon {
        font-size: $modal-icon-size;
        text-align: center;
    }
    &__header {
        user-select: text;
        text-align: center;
        font-size: $small-header-font-size;
    }
    &__body {
        user-select: text;
        text-align: left;
        margin: $base-spacing;
    }
    &__buttons {
        text-align: right;
        > button {
            margin-bottom: $small-spacing;
        }
    }
    &__body,
    &__buttons {
        align-self: center;
        width: 40%;
        .modal--wide & {
            width: 80%;
        }
        @include tablet {
            width: 90%;
        }
    }
    &__check-wrap {
        margin-top: $base-spacing;
    }
    &__pre {
        white-space: pre-wrap;
    }
}
